<template>
  <el-dialog
    title="同步主体结构"
    :visible.sync="visible"
    class="formDialog"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataForm"
      size="mini"
      class="formSty"
    >
      <el-form-item label="主题">
        <el-select v-model="dataForm.theme" placeholder="请选择主题" size="mini">
          <el-option v-for="(item,index) in theme" :key="index" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="文本类型">
        <el-select v-model="dataForm.fileType" placeholder="请选择文本类型" size="mini" @change="selectFileType">
          <el-option v-for="item in fileType" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item v-show="showDelimiter">
        <label slot="label">
          <tips-component :tips-obj="{'labelName':'字段分割符', 'tipsContent':'常用分隔符有：半角英文逗号(,)、缩进符(T)、\u0001(1)等'}" />
        </label>
        <el-input v-model="dataForm.delimiter" placeholder="根节点" />
      </el-form-item>
      <el-form-item v-show="showDrilling">
        <label slot="label">
          <tips-component :tips-obj="{'labelName':'钻取属性名'}" />
        </label>
        <el-input v-model="dataForm.drilling" placeholder="钻取属性名" />

      </el-form-item>
      <el-button type="primary" style="margin-top:20px;height:40px; padding: 7px 10px; margin-left: 7px;" @click="parsingFunc">开始解析数据结构</el-button>
      <!-- 数据结构 -->
      <h4 class="h4">数据结构</h4>
      <el-table v-loading="loading" :data="dataList" width="100%" :height="250" :cell-style="getCell" :row-style="getAllRow" :header-cell-style="getRowClass">
        <el-table-column type="index" label="序号" fixed width="50" />
        <el-table-column prop="colName" label="字段名称" width="120" />
        <el-table-column prop="colDesc" label="字段描述">
          <template slot-scope="scope">
            <el-input v-model="scope.row['colDesc']" size="mini" />
          </template>
        </el-table-column>
        <el-table-column prop="colType" label="字段类型">
          <template slot-scope="scope">
            <el-select v-model="scope.row['colType']">
              <el-option v-for="item in colTypes" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      loading: false,
      visible: false,
      showDelimiter: false,
      showDrilling: false,
      value: '',
      label: '',
      rowData: '',
      previewDataOfMq: {
        bootstrapServers: '',
        topic: '',
        groupId: '',
        delimiter: '',
        formatType: ''
      },
      dataForm: {
        theme: '',
        fileType: '',
        delimiter: '',
        drilling: ''
      },
      theme: [],
      fileType: [
        {
          value: 'LINE',
          label: 'LINE'
        },
        {
          value: 'JSON',
          label: 'JSON'
        }
      ]
    }
  },
  watch: {
    visible(val) {
      this.visible = val
      if (!val) {
        console.log('this.fileType ------>  ', this.fileType)
      }
    }
  },
  created() {

  },
  methods: {
    parsingFunc() {
      const connConf = JSON.parse(this.rowData.connConf)
      console.log('connConf ------>  ', connConf)
      if ((this.dataForm.delimiter || this.dataForm.drilling) && this.dataForm.theme) {
        // console.log('this. ------>  ',this.dataForm.delimiter);
        // console.log('this.dataForm.theme -1----->  ',this.dataForm.theme);
        if (this.value === 'LINE') {
          this.previewDataOfMq = {
            bootstrapServers: connConf.bootstrapServers,
            topic: 'topic-people',
            groupId: connConf.groupId,
            delimiter: this.dataForm.delimiter,
            formatType: this.value
          }
        } else {
          this.previewDataOfMq = {
            bootstrapServers: connConf.bootstrapServers,
            topic: 'topic-people',
            groupId: connConf.groupId,
            delimiter: this.dataForm.drilling,
            formatType: this.value
          }
        }
        // console.log('this.pre ------>  ',this.previewDataOfMq);
        this.$http({
          url: this.$http.adornUrl(
            `/meta/datasource/previewDataOfMq`
          ),
          method: 'POST',
          data: this.$http.adornData(this.previewDataOfMq)
        }).then((res) => {
          console.log('res------>  ', res)
        })
      } else {
        this.$message({
          message: '不能留空'
        })
      }
    },
    getRowClass({ row, rowIndex }) {
      // 表格头部样式
      return 'font-size: 12px; text-align:center; background-color:#eef1f7; padding: 9px 0px;'
    },
    getAllRow() {
      // 设置行样式
      return ' font-size: 12px; '
    },
    getCell() {
      // 单元格样式
      return 'text-align:center; padding: 6px 0px; '
    },
    // line和json发生改变选择
    selectFileType(data) {
      console.log('data55 ------> ', data)
      const { value, label } = data
      this.value = value
      this.label = label
      // console.log('this.value ------>  ',this.value);
      // console.log('this.label ------>  ',this.label);
      if (this.label === 'LINE') {
        this.showDelimiter = true
        this.showDrilling = false
        return
      } else {
        this.showDelimiter = false
        this.showDrilling = true
        return
      }
    },

    // 调接口获取主题数据
    init(rowData) {
      this.loading = false
      this.showDelimiter = false,
      this.showDrilling = false,
      this.rowData = rowData
      console.log('rowData ------>  ', rowData)
      // 显示弹窗
      this.visible = true

      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
      this.$http({
        url: this.$http.adornUrl(
          `/meta/datasource/getTopicsOfMq`
        ),
        method: 'POST',
        data: this.$http.adornData(rowData)
      }).then(({ data }) => {
        console.log('data ------>  ', data)
        if (data.msg === 'success') {
          this.theme = data.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  // @import '../../../../static/plugins/ztree/css/zTreeStyle/zTreeStyle.css';

  .formDialog{
    .el-dialog{
      min-width: 900px;
      max-width: 1000px;
      .el-dialog__body{
        padding: 20px 20px !important;
        .formSty{
          margin-top: 20px;
          .el-form-item__label{
            padding-right: 4px;
            line-height: 32px !important;
          }
          .el-checkbox__label{
            padding-left: 2px;
          }
          .el-select{
            width: 120px;
          }
          .el-input__inner{
            padding-left: 7px;
          }
        }
        .h4{
          margin: 3px 0px 2px;
        }
        .detailValSty{
          width: 167px;
          height: 30px;
          display: block;
          white-space:nowrap;
          line-height: 30px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .el-dialog__footer{
        padding-top: 0px !important;
        text-align: right;
      }
    }
  }
  .formDialog .el-input--medium .el-input__inner, .formDialog .el-select{
    width: 100%;
  }

.searchSty{
  margin-bottom: 10px;
  .searchInput{
    width: 150px;
  }
  .searchSelect{
    width: 120px;
  }
}

</style>
